<template>
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group> -->
    <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#334157"
        text-color="#fff"
        active-text-color="#fff">
        <el-button class="btn" @click="toggle(isCollapse)">
            <i :class="isCollapse ? 'el-icon-s-unfold': 'el-icon-s-fold'"></i>
        </el-button>
        <el-submenu index="2" class="submenu">
            <template slot="title">超级管理员</template>
            <el-menu-item index="2-1">退出</el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<script>
export default {
    name:'navCon',
    data() {
      return {
        isCollapse:false
      }
    },
    computed:{
    },
    methods: {
        toggle(val) {
            this.isCollapse = !val
            this.$bus.$emit("toggle",!val)
        }
    },
    watch:{
        // isCollapse(val){
        //     console.log('watch---isCollapse',val);
        //     this.$bus.$emit("toggle",val)
        // }
    }
}
</script>

<style scoped>
    .submenu {
        float:right!important;
    }
    .btn{
        background:none!important;
        height: 60px;
        font-size: 20px;
        color:#fff;
        border:none
    }
</style>